<!--聊天群聊某人的界面!-->
<template>
    <div class="chartPage">
        <!-- 聊天头 -->
        <van-nav-bar
                :title="chatObj.name"
                class="header"
                left-text=""
                left-arrow
                @click-left="backToAddress()">
        </van-nav-bar>
        <!-- 聊天消息显示区域 -->
        <div class="chatcontentbox" ref="messagebox">
            <!-- {{chatObj}} -->
            <!-- 顶部下拉部分 -->
            
            <div style="position:absolute; top:0;z-index:9;width:100%;height:1rem;">
                <van-pull-refresh style="height:100%" v-model="isLoading" @refresh="onRefresh">
                </van-pull-refresh>
            </div>
            
            <!-- {{sendTime}} -->
            <groupMessageItem
                    v-for="(item, index) in messagelist"
                    :key="index"
                    :dt="item"
                    :list="messagelist"
                    :preindex="index"
                    :objName="chatObj.name"
            />
        </div>
        <!-- 底部输入区域 -->
        <div class="chatinpubox">
            <div class="inputpart">
                <!-- 语音切换开关-->
                <div class="soundbtnbox">
                    <!-- <i
                            v-show="!soundinput"
                            @click="soundinput = !soundinput"
                            class="el-icon-microphone"
                    ></i>
                    <i
                            v-show="soundinput"
                            @click="soundinput = !soundinput"
                            class="el-icon-turn-off-microphone"
                    ></i> -->
                    <img 
                            v-show="!soundinput"
                            @click="soundinput = !soundinput"
                            class="iconBtn"
                            src="img/iconfont/sound.png"
                    />
                    <img 
                            v-show="soundinput"
                            @click="soundinput = !soundinput"
                            class="iconBtn"
                            src="img/iconfont/noSound.png"
                    />
                </div>
                <!-- input  -->
                <div class="inputsoundmsg" @touchstart="lpstart()"  @touchend="lpend()" v-show="soundinput">
                    按住说话
                </div>
                <input class="inputmsg" type="text" v-model="message" v-show="!soundinput"/>
                <!-- + 下拉按钮 -->
                <div style="margin: 0 0.1rem;">
                    <!-- <img @click="showsubbtnbox" src="img/icon/jia.png" alt /> -->
                    <img class="iconBtn" @click="showsubbtnbox" src="img/iconfont/pluscircle.png" alt />
                </div>
                <!-- 发送按钮 -->
                <transition name="el-zoom-in-right">
                    <!-- <div v-show="message !== ''&&sendType==='文字' +
                     ''" class="transition-box">
                        <van-button type="info" size="small" @click="sendmsg">发送</van-button>
                    </div> -->
                    <van-button type="info" size="small" @click="sendmsg">发送</van-button>
                </transition>
            </div>
            <!-- 弹窗 展示其他按钮-->
            <div style="width:100%;border-top:1px solid #444;background:#fff;">
                <!-- 其他输入 -->
                <div v-show="otherbtnsshow" class="otherbtnsbox">
                    <div class="otherbtnitem" @click="subfunc(item)"  v-for="item in otherbtnlist">
                        <div class="otherbtnimg">
                            <img :src="item.url" style="height: 1rem;width: 1rem;" alt />
                        </div>
                        <div class="otherbtnText">{{ item.title }}</div>
                    </div>
                    <div class="otherbtnitem">
                        <div class="otherbtnimg" @touchstart="showStart()"  @touchend="showEnd()">
                            <img src='img/icon/taskobj.png' style="height: 1rem;width: 1rem;" alt />
                        </div>
                        <div class="otherbtnText">语音识别</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    // import Messageitem from './Message.vue'
    import groupMessageItem from './groupMessage.vue'
    import { Toast } from 'vant'
    import bus from "./../../utils/bus"
    import timecal from "./../../utils/timecal"

    export default {
        components: {
            // Messageitem,
            groupMessageItem
        },
        data() {
            return {
                count: 0,
                isLoading: false,
                //消息
                message: '',
                sendType:'文字',
                chatObj: {
                    name: '',
                    id:''
                },
                soundinput: false,

                ee:'',
                //消息
                otherbtnsshow: false,
                otherbtnlist: [
                    { url: 'img/icon/assemblesite.png', title: '图片' },
                    { url: 'img/icon/dispersesite.png', title: '拍照' },
                    { url: 'img/icon/destination.png', title: '定位' },
                    // { url: 'img/icon/taskobj.png', title: '语音识别' },
                ],

                messagelist: [],

                receiveGroupMessage:"",
                newSound:false,
                newPic:false,

                histms:"",
               

                //聊天对象名
                objName:"",


                //发送时间
                sendTime:"",
                //收到时间
                receiveTime:"",

                //早期时间
                preTime:"",

                //路径path
                imgPath:"",

            }
        },
        methods: {
            getDtfromRoute() {
                //这个函数是路由跳转的依据，获取到id和name

                if (this.$route.query!==null) {
                    this.chatObj.id = this.$route.query.id;
                    this.chatObj.name = this.$route.query.name;
                    this.gethistorylist();
                }
            },
            showsubbtnbox() {
                this.otherbtnsshow = !this.otherbtnsshow;
            },
            //获取群聊历史信息
            gethistorylist() {
                let res = $App.getGroupChatHisByPage(JSON.stringify({
                    id:this.chatObj.id,
                    page:1,
                    size:20
                }));
                this.messagelist = JSON.parse(res).reverse();
                // console.log(this.messagelist);
                this.messagelist.forEach((item)=>{
                    // console.log(item);
                    if(item.type=='图片'){
                        var androidImgKey = "http://androidimg";
                        item.content = androidImgKey +  item.content;
                    }
                })
            },
            //语音输入相关
            lpstart() {
                Toast.success('说话中~~~');
                $App.recordVoiceStart(); //开始录音
            },
            lpend() {
                Toast.success('结束~~~');
                $App.recordVoiceEnd(); //结束录音
            },

            showStart(){
                Toast.success('语音识别中~~~');
                this.str=["请","到","528","厂","集","合"];
                 this.sendType='文字';
                let i=0;
                setInterval(() => {
                    if(i<6){
                        this.message=this.message+this.str[i];
                        i++;
                    }
                }, 500);
            },
            showEnd(){
                Toast.success('语音识别结束~~~');
            },
            recordStart(dt) {},
            recordEnd(dt) {  //安卓提供的音频信息
                this.message = dt;
                this.sendType='语音';
                this.sendmsg();
            },
            //子点击效果
            subfunc(dt){
                switch(dt.title){
                    case '图片':this.fun0();break;
                    case '拍照':this.fun1();break;
                    case '定位':this.fun2();break;
                }
            },
            //图片
            fun0(){
                $App.selectPhoto();
            },
            //拍照
            fun1(){
                let res = $App.takePhoto();
            },
            //定位
            fun2(){
                this.message="经度:118.767413,纬度:32.04154";
                this.sendType='文字';
                this.sendmsg();
            },
            //名片
            fun3(){
                Toast.success('暂时没有此功能');
            },

            photoUpload(dt){
                this.sendType='图片';
                if(dt.substring(dt.length - 4) == '.jpg'){
                    this.message = dt;
                    this.sendmsg();
                }else{
                    Toast.fail("请选择jpg格式的文件");
                }
            },
            //发送消息
            sendmsg() {
                if(this.soundinput===false&&this.sendType!=='图片'){
                    this.sendType='文字';
                }
                if (this.message !== '') {
                    if (this.chatObj.name == '本机') {
                        this.$message({
                            type:'warning',
                            message:'不能给自己发消息'
                        })
                    } else {
                        let msgbody = {
                            groupid: this.chatObj.id,
                            sendid : "local",
                            type:this.sendType, //'图片'、'文字'、'语音'
                            content: this.message,
                        };
                        this.ee=msgbody;
                        let res = $App.sendGroupChat(JSON.stringify(msgbody)); //返回一个时间
                        this.sendTime = res;
                        msgbody.time = res;
                        if(this.sendType=="图片"){
                            var androidImgKey = "http://androidimg";
                            msgbody.content = androidImgKey + msgbody.content;
                        }
                        this.messagelist.push(msgbody);
                        this.message = ''
                    }
                } else {
                    this.$message({
                        type:'warning',
                        message:'请输入内容'
                    })
                    // console.log("");
                }
            },
            //模拟发语音接收
            receiveSound(){
                this.messagelist.push({
                    content:'/storage/emulated/0/Scj/Export/voice/20211224092214.amr',
                    id:0,
                    isread:0,
                    issuccess:1,
                    receiveid: 'local',
                    sendid:'陈晨',
                    time:'2021-12-26 11:23:12',
                    type:'语音'
                });
                $App.chatBroadcast('语音');
                setTimeout(() => {
                    this.messagelist[this.messagelist.length-1].isread=1;
                }, 5000);
            },
            //模拟发图片接收
            receivePic(){
                $App.chatBroadcast('图片');
                setTimeout(() => {
                    this.messagelist[this.messagelist.length-1].isread=1;
                }, 3000);
            },
            //模拟文字接收
             onmessage(dt) {
                //  readChat 传对方人的id
                if(this.chatObj.id==dt.groupid){
                    $App.readGroupChat(dt.groupid);
                    // console.log(dt.groupid);
                    // console.log(this.chatObj.id);
                }
                this.receiveGroupMessage = dt;
                this.receiveTime = dt.time;
                if(this.receiveGroupMessage.type =='文字'){
                    if(this.receiveGroupMessage.groupid == this.chatObj.id){
                        this.messagelist.push(this.receiveGroupMessage);
                    }
                }else if(dt.type=='语音'){
                    if(this.receiveGroupMessage.groupid == this.chatObj.id){
                        this.messagelist.push(this.receiveGroupMessage);
                    }
                }else if(dt.type=="图片"){
                    if(this.$route.path == '/groupinfo'&&this.chatObj.id==dt.groupid){
                        this.receiveGroupMessage.isread = 1;
                        var androidImgKey = "http://androidimg";
                        this.receiveGroupMessage.content = androidImgKey + this.receiveGroupMessage.content;
                    }
                    // console.log("receiveGroupMessage",this.receiveGroupMessage);
                setTimeout(() => {
                    this.messagelist.push(this.receiveGroupMessage);
                    // console.log(this.receiveGroupMessage);
                    },1000);
                }
            },
            //模拟
            show(){
                // //5s发文字
                setTimeout(() => {
                    //  this.receiveSound()
                    timecal.caldatetime(this.preTime,Date.now())
                },5000);
                // //15s后发图片
                // setTimeout(() => {
                //     this.onmessage2()
                // },15000);
                // // //30s后发语音
                // setTimeout(() => {
                //     this.receiveSound()
                // },5000);

                // //10s后发语音
                // setTimeout(this.receivePic(),30000);
            },

            tobottom() {
                let messagebox = this.$refs.messagebox;
                if (messagebox.scrollHeight > messagebox.clientHeight) {
                    messagebox.scrollTop = messagebox.scrollHeight;
                }
            },
            onRefresh() {
                setTimeout(() => {
                    this.isLoading = false;
                    this.count++;
                }, 1000);
            },
            backToAddress(){
                // this.$router.push("/chatlist");
                this.$router.push("/");
            },
            //时间转换函数
            dateTimeChange() {
                let datetime = new Date();
                let Y = datetime.getFullYear();
                let M =
                    datetime.getMonth() + 1 < 10
                        ? "0" + (datetime.getMonth() + 1)
                        : datetime.getMonth() + 1;
                let D =
                    datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
                let h =
                    datetime.getHours() < 10
                        ? "0" + datetime.getHours()
                        : datetime.getHours();
                let m =
                    datetime.getMinutes() < 10
                        ? "0" + datetime.getMinutes()
                        : datetime.getMinutes();
                let s =
                    datetime.getSeconds() < 10
                        ? "0" + datetime.getSeconds()
                        : datetime.getSeconds();
                return Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;
            },

        },
        mounted() {
            this.getDtfromRoute();

            window.recordStart = this.recordStart;
            window.recordEnd = this.recordEnd;

            window.photoUpload = this.photoUpload;


            bus.$on('onmessage',dt =>{

                this.onmessage(dt);
                this.receiveTime = dt.time;

            });
        },
        created(){
            this.preTime = Date.now();
            // this.receivePic()
            // console.log("当前页面路由是",this.$route.path)

        },
        updated(){
            this.tobottom();
        },

        
    }


</script>
<style scoped>
    .chartPage {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .chartPage .header{
        /* background-color: #153744; */
        color: #ffffff;
         color:black;
    }
    /deep/ .van-nav-bar .van-icon {
        /* color: #ffffff; */
        color:black;
    }
    /deep/ .van-nav-bar .van-nav-bar__title {
        /* color: #ffffff; */
        color:black;
    }

    /*聊天列表*/
    .chatcontentbox {
        flex: 1;
        overflow-y: auto;
        position: relative;
    }
    /*聊天下部分*/
    .chatinpubox {
        border: 1px solid rgba(21, 55, 68, 0.2);
        background-color: rgba(21, 55, 68, 0.11);
        display: flex;
        flex-direction: column;
    }
    .inputpart {
        height: 2.5rem;
        margin: 0.1rem 0;
        color: #999;
        display: flex;
        width: 100%;
        align-items: center;
    }
    .soundbtnbox {
        height: 100%;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
    }
    .inputsoundmsg{
        margin: 0;
        flex: 1;
        height: 90%;
        text-align: center;
        border:1px solid rgba(21, 55, 68, 0.2) ;
        line-height: 2rem;
    }
    .inputmsg {
        flex: 1;
        height: 95%;
        margin: 0;
    }
    .iconBtn{
        width:30px;
        height:30px;
    }

    .soundinputbox {
        height: 2.5rem;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pressbtn {
        height: 2rem;
        width: 2rem;
        border: 1px solid #000;
        border-radius: 50%;
    }


    .otherbtnsbox {
        display: flex;
        height: 3rem;
        align-items: center;
        justify-content: space-around;
    }
    .otherbtnitem {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .otherbtnimg {
        height: 2rem;
        border-radius: 0.2rem;
        width: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .otherbtnText{
        line-height: 1rem;
        font-size: 0.7rem;
    }
</style>

